<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style>
        #demo1 {
            width: 100px;
            height: 100px;
        }

        body {
            background-color: #ffffff;
        }

        .tishi {
            color: red;
        }
    </style>
</head>
<form>
    <div class="layui-form-item">
        <label class="layui-form-label required">父级名称</label>
        <div class="layui-input-block">
            <select style="width: 180px;height: 30px;" class="ipt" id="roleId">
                <option>无</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">子级名称</label>
        <div class="layui-input-block">
            <select style="width: 180px;height: 30px;" class="ipt" id="roleIds">
                <option>无</option>
            </select>
        </div>
    </div>
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" lay-reqtext="类型不能为空" placeholder="请输入商品名称"
                       autocomplete="off" class="layui-input" id="yhm"><span class="tishi"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="启用" title="启用" checked="">
                <input type="radio" name="sex" value="禁用" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img onclick="showimg(this)" class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
        <%--    隱藏表单 存储上传成功后 回调返回的文件名--%>
        <input type="hidden" name="photo" id="photo"><br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" id="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</form>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'upload', 'table', 'element', 'layer'], function () {
        var form = layui.form
        let $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        $.ajax({
            "url": "spcx?opr=leix",
            "type": 'post',
            "data": {},
            async: false,   //如果不加，无法实现数据传值
            "dataType": 'json',
            "success": function (datajson) {
                var select = $("#cRoleName");
                $(datajson).each(function (key) {  //循环读取后台传来的Json数据
                    var roleName = datajson[key].etype;
                    //调用自定义方法
                    AppendNode(roleName, roleName);//将value和text添加到下拉框中
                });
            },
            error: function () {
                alert("出现错误");
            }
        })

        function AppendNode(values, texts) {
            $("#roleId").append("<option  value='" + values + "'  name='rr' id='rr'>" + texts + "</option>");
        }

        $("select[id=roleId]").blur(function () {
            $("#roleIds").find("option").remove();
            $("#roleIds").append("<option name='ss' id='ss'>无</option>");
            var myselect = document.getElementById("roleId");
            var index = myselect.selectedIndex;             // selectedIndex代表的是你所选中项的index
            myselect.options[index].value;
            let rr = myselect.options[index].text;
            $.ajax({
                "url": "spcx?opr=spleix&rr=" + rr,
                "type": 'post',
                "data": {},
                async: false,   //如果不加，无法实现数据传值
                "dataType": 'json',
                "success": function (datajson) {
                    var select = $("#cRoleName");
                    if (datajson == null || datajson == "") {
                        $("#roleIds").append("<option name='ss' id='ss'>无</option>");
                    } else {
                        $(datajson).each(function (key) {  //循环读取后台传来的Json数据
                            var roleNames = datajson[key].etype;
                            //调用自定义方法
                            AppendNodes(roleNames, roleNames);//将value和text添加到下拉框中
                        });
                    }
                },
                error: function () {
                    alert("出现错误");
                }
            })

            function AppendNodes(value, text) {
                $("#roleIds").append("<option  value='" + value + "'  name='ss' id='ss'>" + text + "</option>");
            }
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let a = document.getElementById("demo1").src;
            if (a == "" || a == null) {
                $("#photo").val("初始化.png");
            }
            var myselect = document.getElementById("roleId");
            var index = myselect.selectedIndex;             // selectedIndex代表的是你所选中项的index
            myselect.options[index].value;
            let rr = myselect.options[index].text;

            var myselects = document.getElementById("roleIds");
            var indexs = myselects.selectedIndex;             // selectedIndex代表的是你所选中项的index
            myselects.options[indexs].value;
            let rrs = myselects.options[indexs].text;
            var p_name = $("#yhm").val()
            if (rr == p_name || rrs == p_name) {
                $(".tishi").text("商品名称与父级冲突").show(200);
                $(".tishi").delay(2500).hide(200);
            } else {
                    let post_data = $("form").serialize();
                    $.ajax({
                        "url": "spcx?opr=addSaveej&rr='" + rr + "'&ss='" + rrs + "'",
                        "dataType": 'text',
                        "type": 'post',
                        "data": post_data,
                        async: false,
                        "success": function (date) {
                            top.window['upload'].frames.location.reload();
                            top.window['lode'].frames.location.reload();
                            if (date == "true") {
                                layer.msg('新增成功', {icon: 1, time: 1500}, function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    let b=sessionStorage.obs;
                                    let a=b.replace(/\"/g, "");
                                    let cz="商品类型";
                                    let gn="类型新增";
                                    let jg="成功";
                                    $.ajax({
                                        "url": "gly?opr=xmr",
                                        "data": {name:a,cz:cz,gn:gn,jg:jg}
                                    })
                                });
                            } else {
                                layer.msg('新增失败', {icon: 2, time: 1500});
                                let b=sessionStorage.obs;
                                let a=b.replace(/\"/g, "");
                                let cz="商品类型";
                                let gn="类型新增";
                                let jg="失败";
                                $.ajax({
                                    "url": "gly?opr=xmr",
                                    "data": {name:a,cz:cz,gn:gn,jg:jg}
                                })
                            }
                        }
                    });
            }
            return false;
        });
        //上传文件
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'member?opr=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                // 给隐藏表单赋值
                $("#photo").val(res.imgSrc);
                $('#demoText').html('');
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    })

    function showimg(t) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '516px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img style="display: inline-block; width: 100%; height: 100%;" src="' + t.src + '">'
        });
    }
</script>
</body>
</html>